<template>
  <div class="width-100 height-100 position-relative" v-loading="loading">
    <v-chart
      :option="option" style="width:100%;height:100%;"
      :theme="chartTheme" autoresize
    ></v-chart>
    <div class="chart-content flex-center width-100">
      <ol style="padding-left: 0;">
        <li style="line-height: 2;font-size: 1.1rem;" v-for="(item, index) in data" :key="item.name" :style="{color: colors[index]}">{{item.name}}</li>
      </ol>
    </div>
  </div>
</template>

<style scoped>
.chart-content {
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, 0);
}
.chart-content li {
  list-style-position: inside;
}
</style>

<script>
import MixinVchartTheme from '@/mixins/mixin-vchart-theme';

export default {
  name: 'pie-chart',
  mixins: [MixinVchartTheme],
  props: {
    title: String,
    colors: {
      type: Array,
      default () {
        return ['#0037c8', '#1378e0', '#35abb9', '#4ba61a', '#9cbb16', '#d0a71b']
      }
    },
    data: {
      type: Array,
      default () {
        return []
      }
    },
    downloadFunc: Function
  },
  data () {
    return {
      loading: true
    }
  },
  computed: {
    option () {
      const data = this.data
      const colors = this.colors
      data.sort((a, b) => b.value - a.value)
      const title = this.title
      return {
        title: {
          text: title,
          textStyle: {
            fontWeight: 'normal'
          }
        },
        tooltip: {
          show: true,
          valueFormatter: value => value != null ? `${value}%` : ''
        },
        toolbox: {
          show: true,
          top: '4%',
          feature: {
            myDownload: {
              show: true,
              title: '导出数据',
              icon: 'path://M753.66001 334.184121c0-4.48904 0.498782-8.479299 0.498782-12.968339 0-133.673648-108.734535-242.906965-242.906965-242.906965-133.673648 0-242.906965 108.734535-242.906965 242.906965 0 6.48417 0.498782 12.968339 0.997565 19.951291-97.761325 20.450073-170.084754 107.73697-170.084754 208.989771 0 117.712616 95.766196 213.478811 213.478811 213.478811 9.975645 0 89.282026 0.498782 89.282026 0.498782l0 0c8.479299 0 14.963468-6.48417 14.963468-14.963468 0-8.479299-6.48417-14.963468-14.963468-14.963468-0.498782 0-1.496347 0-1.995129 0-12.968339 0-78.308816-0.498782-87.286897-0.498782-101.252801 0-183.551875-82.299075-183.551875-183.551875 0-91.277155 68.333171-169.585972 158.612762-181.556746l14.963468-1.995129-1.995129-14.963468c-1.496347-9.975645-1.995129-20.450073-1.995129-29.926936 0-117.213833 95.267414-212.980029 212.980029-212.980029s212.980029 95.267414 212.980029 212.980029c0 8.479299-0.498782 16.459815-1.496347 25.437896l-1.995129 16.958597 16.958597 0 0.997565 0c102.250365 0 185.048222 82.797857 185.048222 185.048222S840.448125 733.209937 738.197759 733.209937c-2.493911 0-8.479299 0-16.958597 0-19.951291 0.498782-66.338042 0.997565-72.822211 0.498782-7.980516-0.997565-15.46225 4.48904-16.958597 12.968339-0.997565 7.980516 4.48904 15.961033 12.968339 16.958597 2.992694 0.498782 9.476863 0.498782 20.450073 0.498782 12.968339 0 31.922065 0 56.861179-0.498782 8.479299 0 14.464686 0 16.459815 0 118.71018 0 214.975158-96.264978 214.975158-214.975158C953.172918 434.938139 864.888456 341.665855 753.66001 334.184121z M615.996103 798.051632l-74.318558 74.318558 0-295.279104c0-8.479299-6.48417-14.963468-14.963468-14.963468s-14.963468 6.48417-14.963468 14.963468L511.750609 872.868972l-74.81734-74.81734c-5.985387-5.985387-15.46225-5.985387-20.948855 0-5.985387 5.985387-5.985387 15.46225 0 20.948855l97.761325 97.761325c0.498782 0.997565 0.997565 1.496347 1.995129 1.995129 2.992694 2.992694 6.982952 4.48904 10.474428 4.48904 0 0 0 0 0 0 0 0 0 0 0 0 0.997565 0 1.995129 0 2.992694-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.498782 0.498782 0 0.997565-0.498782 1.496347-0.997565 0.498782 0 0.997565-0.498782 0.997565-0.498782 1.496347-0.997565 2.992694-2.493911 3.990258-3.990258l97.761325-97.761325c5.985387-5.985387 5.985387-15.46225 0-20.948855C630.959571 792.066245 621.482708 792.066245 615.996103 798.051632z M541.677545 184.050658c0-8.479299-6.48417-14.963468-14.963468-14.963468-88.284462 0-160.607891 71.824647-160.607891 160.607891 0 8.479299 6.48417 14.963468 14.963468 14.963468s14.963468-6.48417 14.963468-14.963468c0-71.824647 58.357526-130.680955 130.680955-130.680955C534.694593 199.014126 541.677545 192.529956 541.677545 184.050658z',
              onclick: (e) => {
                this.downloadFunc && this.downloadFunc()
              }
            },
          }
        },
        legend: {
          show: false,
          bottom: '20px',
          left: 'center',
          textStyle: {
            fontSize: 0
          },
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '40%'],
            center: ['50%', '30%'],
            label: {
              show: false
            },
            data: data.map((v, i) => ({
              ...v,
              itemStyle: {
                color: colors[i]
              }
            })),
          }
        ]
      }
    },
  },
  beforeDestroy () {
    this.timer && clearInterval(this.timer)
    erd.removeAllListeners(this.$refs.container)
  },
  mounted () {
    const chart = this.$refs.chart
    const container = this.$refs.container
    erd.listenTo(container, function () {
      chart.resize({
        animation: {
          duration: 1000,
        }
      })
    })
  },
  methods: {
    setLoading (loading) {
      this.loading = loading
    },
    showTip () {
      const chart = this.$refs.chart
      const data = this.data
      let i = 0
      const n = data.length
      this.timer = setInterval(() => {
        i++
        if (i >= n) {
          i = 0
        }
        if (chart) {
          chart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: i
          })
        } else {
          clearInterval(this.timer)
        }
      }, 2000)
    },
  },
}
</script>
